<template>
  <van-nav-bar>
    <template #left>
      <h3>个人中心</h3>
    </template>
    <template #right>
      <van-icon name="chat-o" size="24" badge="9" />
    </template>
  </van-nav-bar>

  <div id="member">
    <div style="padding: .45rem">
      <van-cell size="large" >
        <template #title>
          <div class="content-box">
            <img :src="member.headImgUrl" alt="" />
            <div class="right">
<!--              <div class="title">账号: {{ member.username }}</div>-->
              <div class="desc">登录名: {{ member.nickname }}</div>
              <div class="desc">手机号: {{ member.mobile }}</div>
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell v-show="authed">
        <template #icon>
          <van-button color="#04BE02" size="small" block @click="wxAuthUrlHandle()">立即授权</van-button>
        </template>
      </van-cell>
      <van-cell title="&nbsp;&nbsp;基本信息" is-link>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <van-icon class-prefix="my-icon" name="hongbao1" size="32px" />
        </template>
      </van-cell>
      <van-cell title="&nbsp;&nbsp;学历信息" icon="thumb-circle-o" is-link>
        <template #icon>
          <van-icon class-prefix="my-icon" name="jiaoyu" size="32px" />
        </template>
      </van-cell>
      <van-cell title="&nbsp;&nbsp;修改密码" icon="location-o" is-link>
        <template #icon>
          <van-icon class-prefix="my-icon" name="tequan1" size="32px" />
        </template>
      </van-cell>
      <van-cell title="&nbsp;&nbsp;关于我们" icon="location-o" is-link>
        <template #icon>
          <van-icon class-prefix="my-icon" name="huore1" size="32px" />
        </template>
      </van-cell>
      <div style="width: 61.8%;margin: 2rem auto auto;">
        <van-button size="small" color="linear-gradient(to right, #ff6034, #ee0a24)" round block @click="logoutHandle()">退出登录</van-button>
      </div>
    </div>
  </div>
  <TabBar />
</template>
<script>
import {clearLoginInfo } from '@/utils'
import { useRouter } from "vue-router"
import { logout, wxAuthUrl, getMemberInfo } from "@/api/member";
import { Toast,Dialog } from "vant"
import { onBeforeMount, reactive, toRefs } from "vue"
import TabBar from "@/components/layout/tab-bar";
import Cookies from "js-cookie"
export default {
  components: {
    TabBar
  },
  setup(){
    const router = useRouter();
    const state = reactive({
      authed: false,
      member: { },
    })

    onBeforeMount(async () => {
      if (Cookies.get('token')){
      await getMemberInfo().then(({ data: res }) => {
          if (res.code !== 0) {
            return Toast.fail(res.msg)
          }
          if(!res.data.headImgUrl) res.data.headImgUrl="https://img.yzcdn.cn/vant/cat.jpeg";
          state.member = res.data
          if (state.member.openid ==null){
            state.authed = true
          }
        })
      } else {
        router.replace("/login");
      }
    })

    const logoutHandle = ()=> {
      Dialog.confirm({ title: "确认", message: "确认退出吗?"}).then(() => {
        logout().then(({ data: res }) => {
          if (res.code !== 0) {
            Toast.fail(res.msg)
          }
          clearLoginInfo()
          router.replace('/login')
        })
      }).catch(() => {});
    }

    const wxAuthUrlHandle = () =>{
      wxAuthUrl(state.member.id).then((res) => {
        window.location.href = res.data;
      })
    }

    return {
      ...toRefs(state),
      logoutHandle,
      wxAuthUrlHandle
    }
  },

}
</script>

<style lang="less" scoped>
#member {
  text-align: center;
}

.content-box {
  display: flex;
  img {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
  }
  .right {
    padding-left: 12px;
    text-align: left;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .desc {
      font-size: 12px;
      color: #969696;
    }
  }
}
</style>
